<template>
  <div class="app-container">

    <router-link :to="'/operationMonitoring/table'" style="position: absolute;top: 60px;right: 50px;" v-if="loading">返回上一级</router-link>
    <div class="waterFactory" v-for="(item,index) in childArray" style="display: inline-block;margin-left: 20px;margin-top: 20px">
      <p class="waterFactoryName">
        <span>{{item.device_name}}</span>
      </p>
      <img :src="item.imgUrl" style="width: 100px;height: 100px;margin-left: 143px;">
      <div style="margin-left: 20px;height: 200px;overflow-y: scroll;">
        <p v-for="item2 in item.plcData">
          <span class="title">{{item2.name}}: </span>
          <span class="data">{{item2.value}}{{item2.unit}}</span>
        </p>
      </div>
    </div>


    <el-dialog
      center
      title="所属设备信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
    import {grade1,plcData,plcRealTime,childList,childListData} from '@/api/operationMonitoring'
    import {getListType} from '@/api/equipmentTypeManagement'
    export default {
        name: "roleManagement",

        data() {
            return {
                childArray:[],
                loading:false,
            };
        },
        computed: {

        },
        methods: {
            initData(){
                let that=this
              console.log(sessionStorage.getItem('parent'))
                childListData(sessionStorage.getItem('parent')).then(res=>{
                    console.log(res,'childData')
                    this.childArray=res.data
                    console.log(this.childArray)
                    setTimeout(()=>{
                        that.loading=true
                    },1000)
                })
            },
        },
        mounted() {
            this.initData()

        },
        created() {
        },
    };
</script>

<style lang="scss">
  .waterFactory{
    width: 390px;
    height: 390px;
    -webkit-box-shadow: #666 0px 0px 10px;
    -moz-box-shadow: #666 0px 0px 10px;
    box-shadow: #666 0px 0px 10px;
    .waterFactoryName{
      border-width: 0 0 1px 0;
      border-style: solid;
      border-color: gray;
      height: 50px;
      .el-button{
        padding: 0px 20px;
      }
      span{
        line-height: 50px;
        display: inline-block;
        margin-left: 20px;
        font-size: 18px;
      }
    }
    .title{
      color: #20a0ff;
    }
    .data{
      color: #20a0ff;
    }
  }

</style>
